<template>
  <div class="custom-radio-group">
    <div
      v-for="option in options"
      :key="option.value"
      class="custom-radio"
      :class="{ 'custom-radio--active': modelValue === option.value }"
      @click="selectOption(option.value)"
    >
      <div class="custom-radio__indicator">
        <div class="custom-radio__dot"></div>
      </div>
      <span class="custom-radio__label">{{ option.label }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Option {
  label: string
  value: any
}

interface Props {
  modelValue?: any
  options: Option[]
}

interface Emits {
  (e: 'update:modelValue', value: any): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const selectOption = (value: any) => {
  emit('update:modelValue', value)
}
</script>

<style scoped>
.custom-radio-group {
  display: flex;
  gap: 16px;
}

.custom-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #e5e5e5;
  border-radius: 20px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.custom-radio:hover {
  border-color: #1989fa;
  background-color: #f7f9ff;
}

.custom-radio--active {
  border-color: #1989fa;
  background-color: #1989fa;
  color: #fff;
}

.custom-radio--active .custom-radio__label {
  color: #fff;
}

.custom-radio__indicator {
  width: 16px;
  height: 16px;
  border: 2px solid #e5e5e5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.custom-radio--active .custom-radio__indicator {
  border-color: #fff;
}

.custom-radio__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: transparent;
  transition: all 0.3s ease;
}

.custom-radio--active .custom-radio__dot {
  background-color: #fff;
}

.custom-radio__label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  transition: color 0.3s ease;
}
</style>
